<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="../js/jquery-3.6.0.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url(../images/shouye.png);
            background-size: cover;
           
        }
        .denglukuang{
            width: 300px;
            height: 350px;
            margin: 0 auto;
            background: rgba(66, 70, 70, 0.082);
            position: absolute;
            left: 40%;
            top: 30%;
        }

            
       
        .xian{
            display: block;
            border-bottom: 1px solid #eee;
            margin: 20px auto;
        }
        .biaoti{
            text-align: center;
            font-size: 30px;
            color: rgba(4, 105, 163, 0.726);
            margin-top: 10px;
        }
        .zhanghao{
            width: 200px;
            height:50px;
            margin: 20px auto;
        }
        .mima{
            width: 200px;
            height:50px;
            margin: 0 auto;
        }
        .xuanxiang{
            text-align: center;
            margin: 20px auto;
        }
        .xuesheng{
            margin-right: 30px;
        }
        .denglu{
            margin-right:100px;
        }
        .denglu1{
            width: 200px;
            height:50px;
            line-height: 40px;
            background: rgba(84, 95, 117, 0.397);
            border: 1 solid rgb(8, 82, 100);
            border-radius: 5%;
            margin: 0 auto;
            text-align: center;
            z-index: 2;
        }
      .xiaoren{
          position: absolute;
          left: 20px;
          top: 90px;
      }
      .mimasuo{
        position: absolute;
          left: 20px;
          top: 160px;
      }
      .panduanzhanghao{
          display:block;
          width: 200px;
          height: 10px;
          margin-top: 5px;
          color: rgb(250, 4, 4);
          
      }
     
    </style>
</head>

<body>
    <div class="box">
        <div class="beijing">
            <div class="denglukuang">
                <p class="biaoti">宿舍管理系统</p>
                <span class="xian"></span>
                <form>
                    <div class="zhanghao form-group">
                      <span class="glyphicon glyphicon-user xiaoren" aria-hidden="true"></span><input type="email" class="form-control" id="exampleInputEmail1" placeholder="usemame">
                      <!-- <span class="panduanzhanghao">请输入正确的账号</span> -->
                    </div>
                    <div class="mima form-group">
                      <span class="mimasuo glyphicon glyphicon-lock" aria-hidden="true"></span><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                      <!-- <span class="panduanzhanghao">请输入正确的密码</span> -->
                    </div>
                    <div class="xuanxiang checkbox">
                        <label class="xuesheng">
                          <input type="checkbox"> 学生
                        </label>
                        <label>
                            <input class="c" type="checkbox"> 管理员
                          </label>
                          <!-- <span class="panduanzhanghao">请输入正确的身份</span> -->
                      </div>
                      <div class=" denglu form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                          <button  type="submit" class="denglu1 btn btn-default">登录</button>
                        </div>
                      </div>
                    </form>
            </div>
        </div>
    </div>
</body>

</html>